<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--
       条件渲染:
        1.v-if
        写法:
            (1).v-if="表达式"
            (2).v-else-if="表达式”
            (3).v-else="表达式"
        适用于:切换频率较低的场景。
        特点:不展示的DOM元素直接被移除。
        注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
        2.v-show
            写法:v-show="表达式”
            适用于:切换频率较高的场景。
            特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
        3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
     -->
    <div id="app">
        <h2 >现在的值为:{{n}}</h2>
        <button @click="n++">n+1</button>

        <h2 v-show="n === 1">happy</h2>
        <h2 v-show="false">sad</h2>
        <h2 v-show="true">angry</h2>

        <h2 v-if="n === 1">happy</h2>
        <h2 v-if="n === 1">happy</h2>
        

        <h2 v-if="n === 1">1</h2>
        <!-- <h2>@</h2>  会被截断 不要再v-if 及 v-if-else中间写 -->
        <h2 v-else-if="n === 1">2</h2>
        <h2 v-else>3</h2>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            n:0
        },
        methods:{
         
        }
    })
</script>
</html>